<!--Created by 熊超超(https://github.com/ccqiuqiu) on 2018/1/10.-->
<template>
  <div>
  <mu-list>
      <mu-sub-header>配置文件列表</mu-sub-header>
      <mu-icon-button @click="downloadTypeA">
        <span>获取配置文件</span>
          <cc-icon name="login" size="36" color="#ff4081" style="float:right"/>
        </mu-icon-button>
        <button class="url-text" v-bind:style="display" @click="copy" data-clipboard-text="tggu8p.natappfree.cc/file/MDMManage.mobileconfig">点击复制链接</button>
        <mu-icon-button @click="downloadTypeA">
        <span>获取配置文件2(参考)</span>
          <cc-icon name="login" size="36" color="#ff4081" style="float:right"/>
        </mu-icon-button>
        <mu-icon-button @click="downloadTypeA">
        <span>获取配置文件3(参考)</span>
          <cc-icon name="login" size="36" color="#ff4081" style="float:right"/>
        </mu-icon-button>
    </mu-list>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import mixin from '$g/mixin'
  import Clipboard from 'clipboard'

  export default {
    components: {},
    mixins: [mixin.updateBar],
    data() {
      return {
        headerBar: '选择配置文件',
        display: {
          display: 'none'
        }
      }
    },
    computed: {
      ...mapState({
        user: state => state.my.user
      })
    },
    methods: {
      downloadTypeA () {
        this.$store.dispatch('preDownload', {userName: this.user.id, passWord: '', nickName: this.user.userName}).then(
          data => {
            if (data.success) {
              this.display.display = ''
            }
          }
        )
      },
      copy () {
        var clipboard = new Clipboard('.url-text')
        clipboard.on('success', e => {
          alert('复制成功,配置文件与系统关联的有效时间为10分钟，请在1分钟内到新的标签页中访问剪切板中的网址并完成配置文件的安装')
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style scoped>
.url-text {
    color: rgba(0,0,0,.54);
    font-size: 0.28889rem;
    line-height: 0.83333rem;
    padding-left: 0.44444rem;
    width: 100%;
}
</style>
